<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>

</head>
<body>
<div id="app">
    <h1>成绩管理</h1>
    <div>
        <div style="float:left;padding-top:16px;">
            <el-button type="primary" style="padding-left:20px;padding-right:20px;font-size:15px;
        line-height:15px;" @click="dialogFormVisible = true ">录入成绩
            </el-button>
            <el-dialog title="录入成绩" :visible.sync="dialogFormVisible">
                <el-form :model="ruleForm2" status-icon ref="ruleForm2" label-width="100px"
                         class="demo-ruleForm">
                    <el-form-item label="学号" prop="studentId">
                        <el-input v-model.number="ruleForm2.studentId"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="studentName">
                        <el-input v-model.number="ruleForm2.studentName"></el-input>
                    </el-form-item>
                    <el-form-item label="分数" prop="scoreCredit">
                        <el-input v-model.number="ruleForm2.scoreCredit"></el-input>
                    </el-form-item>
                    <el-form-item label="所属课程" prop="courseId">
                        <el-select v-model="ruleForm2.courseId" placeholder="请选择">
                            <el-option v-for="item in courses" :key="item.courseId" :label="item.courseName"
                                       :value="item.courseId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
                        <el-button @click="dialogFormVisible=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <div style="padding-bottom:80px;padding-top:10px;">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-input v-model="formInline.studentId" placeholder="请输入学号" style="width:200px;"></el-input>
                <el-input v-model="formInline.studentName" placeholder="请输入名字" style="width:200px;"></el-input>
                <el-button type="primary" style="padding-left:20px;padding-right:20px;font-size:15px;
        line-height:15px;" @click="demand">搜索
                </el-button>
            </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="学号" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.studentId }}</span>
                </template>
            </el-table-column>
            <el-table-column label="姓名" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.student.studentName }}</span>
                </template>
            </el-table-column>

            <el-table-column label="成绩" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.scoreCredit }}</span>
                </template>
            </el-table-column>
            <el-table-column label="所属课程">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.course.courseName }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" @click="tostudentUpdate(scope.row)"></el-button>
                    <el-dialog title="修改成绩" :visible.sync="modification">
                        <el-form :model="ruleForm3" status-icon ref="ruleForm3" label-width="100px"
                                 class="demo-ruleForm">
                            <el-form-item label="学号" prop="studentId">
                                <el-input v-model="ruleForm3.studentId"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" prop="studentName">
                                <el-input v-model="ruleForm3.studentName"></el-input>
                            </el-form-item>
                            <el-form-item label="所属课程" prop="courseId">
                                <el-select v-model="ruleForm3.courseId" placeholder="请选择">
                                    <el-option v-for="item in courses" :key="item.courseId" :label="item.courseName"
                                               :value="item.courseId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="分数" prop="scoreCredit">
                                <el-input v-model="ruleForm3.scoreCredit"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitFormUpdate('ruleForm3')">提交</el-button>
                                <el-button @click="modification=false">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </template>
            </el-table-column>

            <el-pagination background layout="prev, pager, next" :total="1000">
            </el-pagination>
        </el-table>
        <!--分页-->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="pageIndex" :page-size="pageSize" layout="total, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </div>
    </div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    let _this = new Vue({
        el: '#app',
        data: {
            courses: [],
            currentPage: 1,
            pageIndex: 1,
            pageSize: 5,
            total: 0,
            tableData: [],
            dialogFormVisible: false,
            modification: false,
            ruleForm2: {
                courseId: 2,
                studentId: '',
                studentName: '',
                scoreCredit: ''
            },
            formInline: {
                studentId: null,
                studentName: null
            },
            ruleForm3: {
                scoreId:null,
                studentId: '',
                studentName: '',
                courseName: '',
                scoreCredit: ''
            }
        },
        created: function () {
            this.scoreList();
            let user = localStorage.getItem('teacher-user');
            if (user) {
                user = JSON.parse(user);
                this.teacherId = user.teacherId
            }
            this.getCourserList();
        },
        methods: {
            getCourserList() {
                $.ajax({
                    type: 'post',
                    url: '/api/teacher/courseware/getCourseList',
                    data: {},
                    dataType: 'json',
                    success: function (res) {
                        // console.log(res)
                        _this.courses = res.resData
                    }
                })
            },
            demand() {
                this.scoreList();
            },
            scoreList() {
                $.ajax({
                    type: 'post',
                    url: '/api/teacher/score/getAllListScore',
                    data: {
                        pageIndex: this.pageIndex,
                        id: this.formInline.studentId,
                        name: this.formInline.studentName
                    },
                    dataType: 'json',
                    success: function (res) {
                        _this.tableData = res.resData.list;
                        _this.pageSize = res.resData.pageSize;
                        _this.total = res.resData.total;
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })
            },
            /*添加*/
            submitForm(formName) {
                console.log(this.ruleForm2)
                $.ajax({
                    type: 'post',
                    url: '/api/teacher/score/insertSelective',
                    data: JSON.stringify(this.ruleForm2),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (res) {
                        if (res.status == 200) {
                            _this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            _this.dialogFormVisible = false;
                            _this.scoreList();
                        } else {
                            _this.$message({
                                message: '添加失败',
                                type: 'info'
                            });
                        }
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })
            },


            /*修改*/
            tostudentUpdate(row) {
                this.ruleForm3.scoreId=row.scoreId;
                this.ruleForm3.courseId = row.course.courseId
                this.ruleForm3.studentId = row.studentId;
                this.ruleForm3.studentName = row.student.studentName;
                this.ruleForm3.courseName = row.course.courseName;
                this.ruleForm3.scoreCredit = row.scoreCredit;
                this.modification = true;
            },
            submitFormUpdate(formName) {

                $.ajax({
                    type: 'post',
                    url: '/api/teacher/score/updateByPrimaryKey',
                    data: JSON.stringify(this.ruleForm3),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (res) {
                        if (res.status == 200) {
                            _this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            _this.modification = false;
                            _this.scoreList();
                        } else {
                            _this.$message({
                                message: '添加失败',
                                type: 'info'
                            });
                        }
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })
            },


            handleSizeChange(val) {
            },
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.scoreList();
            },
        }
    })

</script>
</body>
</html>